<template>
  <div style="display: flex; align-items: center; flex-direction: column">
    <template v-if="step">
      <template>
        <i class="el-icon-delete" @click="removeSelf"></i>
        <lineWrapper :height="'10px'"></lineWrapper>
      </template>

      <el-button
        style="margin-bottom: -20px; z-index: 200"
        @click="addBranch(step)"
      >
        添加分支
      </el-button>
      <div style="display: flex; justify-content: space-between">
        <template v-for="(b, index) in step.Branchs">
          <div v-if="!b.Removed" :key="index" class="branch">
            <div
              style="
                height: 3px;
                width: 100%;
                display: block;
                background-color: gray;
                position: absolute;
              "
              :style="{
                width:
                  index == 0 || index == step.Branchs.length - 1
                    ? '50%'
                    : '100%',
                left: index == 0 ? '50%' : 0,
              }"
            ></div>
            <lineWrapper :height="'40px'"></lineWrapper>
            <div class="condition" @click="showEditBranch(b)">
              <div class="condition-title">
                <div style="display: flex">
                  <div>{{ b.FLB_Name }}</div>
                  <i
                    v-if="b.IsNew || b.IsModified"
                    class="el-icon-edit"
                    style="
                      font-weight: bold;
                      margin-left: 5px;
                      margin-bottom: 2px;
                    "
                  ></i>
                </div>

                <i
                  class="el-icon-delete"
                  size="20"
                  @click.stop="removeBranch(b, index)"
                ></i>
              </div>
              <div class="condition-body">
                <template v-if="b.FLB_IsDefault">
                  <div style="color: #888">默认</div>
                </template>
                <template
                  v-else-if="
                    !b.ConditionGroups || b.ConditionGroups.length == 0
                  "
                >
                  <div style="color: #888">请添加分支条件</div>
                </template>
                <template v-else>
                  <div
                    v-for="(group, gIndex) in b.ConditionGroups"
                    :key="gIndex"
                  >
                    <div class="condition-item">
                      <div class="condition-item-title">
                        条件组{{ gIndex + 1 }}
                      </div>
                      <div class="condition-item-text">
                        <div
                          v-for="(condition, cIndex) in group.Conditions"
                          :key="cIndex"
                        >
                          {{ cIndex == 0 ? '' : '并且' }}
                          <span style="color: red">
                            {{ condition.FF_DisplayName
                            }}{{ condition.FLBC_ExpressionDesc
                            }}{{ condition.FLBC_DisplayValue }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <div v-if="$route.query.isTest">
                  <div>BranchId:{{ b.FLB_Guid }}</div>
                  <div>StepId:{{ b.FLB_StepId }}</div>
                  <div>NextStepId:{{ b.FLB_NextStepId }}</div>
                </div>
              </div>
            </div>
            <lineWrapper
              :showBtn="true"
              @add="
                (type, defaultName) => addBranchStep(b, -1, type, defaultName)
              "
              :height="b.Steps && b.Steps.length > 0 ? '90px' : null"
            ></lineWrapper>
            <div
              v-for="(s, sIndex) in b.Steps"
              :key="sIndex"
              style="
                display: flex;
                flex-direction: column;
                align-items: center;
                flex: auto;
              "
              :style="{ flex: b.Steps[sIndex + 1] ? null : 'auto' }"
            >
              <!-- {{ s.FLS_Guid }}
              {{ s.FLS_NextStepId }} -->
              <flow-branch
                @onRemove="removeStep(s, b, sIndex)"
                @onCombineStep="combineStep(s, b, sIndex)"
                :step="s"
                v-if="s.FLS_Type == 4"
                :actions="actions"
                :conditionFields="conditionFields"
              ></flow-branch>
              <flow-step
                :business="business"
                @onRemove="removeStep(s, b, sIndex)"
                v-else
                :step="s"
                :actions="actions"
              ></flow-step>
              <lineWrapper
                v-if="b.Steps[sIndex + 1] && b.Steps[sIndex + 1].FLS_Type == 4"
                height="60px"
                :showBtn="true"
                @add="
                  (type, defaultName) =>
                    addBranchStep(b, sIndex, type, defaultName)
                "
              ></lineWrapper>
              <lineWrapper
                v-else
                :height="b.Steps[sIndex + 1] ? '90px' : null"
                :showBtn="true"
                @add="
                  (type, defaultName) =>
                    addBranchStep(b, sIndex, type, defaultName)
                "
              ></lineWrapper>
            </div>

            <div
              style="
                height: 3px;
                width: 100%;
                display: block;
                background-color: gray;
                position: absolute;
                bottom: 0;
              "
              :style="{
                width:
                  index == 0 || index == step.Branchs.length - 1
                    ? '50%'
                    : '100%',
                left: index == 0 ? '50%' : 0,
              }"
            ></div>
          </div>
        </template>
      </div>
    </template>
    <el-drawer
      :visible.sync="editBranchVis"
      title="分支配置"
      direction="rtl"
      size="760px"
    >
      <editBranch
        :conditionFields="conditionFields"
        :branch="currentBranch"
      ></editBranch>
    </el-drawer>
  </div>
</template>
<script>
import flowStep from './flowStep.vue'
import lineWrapper from './lineWrapper.vue'
import editBranch from './editBranch.vue'
import { generateGUID } from '@/utils/guid'
export default {
  name: 'flow-branch',
  components: { flowStep, lineWrapper, editBranch },
  props: ['step', 'actions', 'conditionFields', 'business'],
  data: function () {
    return {
      newStep: {},
      currentBranch: null,
      editBranchVis: false,
    }
  },
  methods: {
    addBranchStep(branch, index, type, defaultName) {
      let lastStep = branch.Steps[index]
      //index为-1时，该分支中无任何节点
      let guid = generateGUID()
      let nextId = lastStep ? lastStep.FLS_NextStepId : branch.FLB_NextStepId
      this.newStep = {
        FLOW_BusinessID: this.step.FLOW_BusinessID,
        FLS_FlowId: this.step.FLS_FlowId,
        FLS_NextStepId: nextId,
        FLS_Name: defaultName,
        FLS_Guid: guid,
        FLS_Type: type,
        FLS_Position: 20, //支干节点
        FLS_ChoiceID: null,
        FLS_ChoiceDesc: null,
        IsNew: true,
      }
      if (type == 4) {
        this.newStep.Branchs = [
          {
            Steps: new Array(),
            FLB_FlowId: this.step.FLS_FlowId,
            FLB_StepId: guid,
            FLB_NextStepId: nextId,
            FLB_Guid: generateGUID(),
            FLB_Name: '分支1',
            FLB_Index: 1,
            IsNew: true,
            ConditionGroups: [],
          },
          {
            Steps: new Array(),
            FLB_FlowId: this.step.FLS_FlowId,
            FLB_StepId: guid,
            FLB_NextStepId: nextId,
            FLB_Guid: generateGUID(),
            FLB_Name: '默认分支',
            FLB_Index: 999,
            FLB_IsDefault: true,
            IsNew: true,
            ConditionGroups: [],
          },
        ]
      }
      if (lastStep && lastStep.FLS_Type == 4) {
        //在分支节点下添加新节点,需要将各个分支下个节点的ID设为新节点
        lastStep.Branchs.forEach((x) => {
          if (x.Steps.length > 0) {
            x.Steps[x.Steps.length - 1].FLS_NextStepId = guid
            x.Steps[x.Steps.length - 1].IsModified = true
          } else {
            x.FLB_NextStepId = guid
            x.IsModified = true
          }
        })
      }
      if (lastStep) {
        lastStep.FLS_NextStepId = guid
        lastStep.IsModified = true
      } else {
        branch.FLB_NextStepId = guid
        branch.IsModified = true
      }

      branch.Steps.splice(index + 1, 0, this.newStep)
      this.$forceUpdate()
    },
    addBranch() {
      this.step.Branchs.splice(this.step.Branchs.length - 1, 0, {
        Steps: new Array(),
        FLB_StepId: this.step.FLS_Guid,
        FLB_FlowId: this.step.FLS_FlowId,
        FLB_NextStepId: this.step.FLS_NextStepId,
        FLB_Guid: generateGUID(),
        FLB_Name: '分支' + this.step.Branchs.length,
        FLB_Index: this.step.Branchs.length + 1,
        IsNew: true,
        ConditionGroups: [],
      })
      this.$forceUpdate()
    },
    getConditionKey(cond) {
      return Object.keys(cond)[0]
    },
    showEditBranch(branch) {
      this.currentBranch = branch
      this.currentBranch.IsModified = true
      this.editBranchVis = true
    },
    removeStep(step, branch, index) {
      var last = branch.Steps.find((s) => s.FLS_NextStepId == step.FLS_Guid)
      branch.Steps.splice(index, 1)
      if (last != null) {
        last.FLS_NextStepId = step.FLS_NextStepId
        last.IsModified = true
      }
      if (index == 0) {
        branch.FLB_NextStepId = step.FLS_NextStepId
        branch.IsModified = true
      }
      this.$forceUpdate()
    },
    combineStep(step, branch, index) {
      var last = branch.Steps.find((s) => s.FLS_NextStepId == step.FLS_Guid)
      //将分支节点删除并将分支下审核节点合并到主干节点中
      branch.Steps.splice(index, 1, ...step.Branchs[0].Steps)
      if (last != null) {
        last.FLS_NextStepId = step.Branchs[0].FLB_NextStepId
        last.IsModified = true
      }
      if (index == 0) {
        branch.FLB_NextStepId = step.FLS_NextStepId
        branch.IsModified = true
      }
      this.$forceUpdate()
    },
    removeSelf() {
      this.$confirm(
        '确定删除此分支节点？分支下的所有节点都会一并删除?',
        '注意'
      ).then((r) => this.$emit('onRemove'))
    },
    removeBranch(b, index) {
      if (this.step.Branchs.length > 2 && b.FLB_IsDefault) {
        this.$message('分支数大于2，默认分支不能删除')
        return
      }
      this.$confirm('确定删除此分支？删除后分支下节点会一并删除?', '注意').then(
        (r) => {
          this.step.Branchs.splice(index, 1)
          if (!this.step.RemovedBranch) {
            this.step.RemovedBranch = []
          }
          this.step.RemovedBranch.push(b)
          if (this.step.Branchs.length == 1) {
            this.$emit('onCombineStep', this.step)
          }
          this.$forceUpdate()
        }
      )
    },
  },
}
</script>
<style scoped>
.branch {
  display: flex;
  flex-direction: column;
  min-width: 300px;
  align-items: center;
  position: relative;
  flex: auto;
}
.branch .condition {
  position: relative;
  width: 260px;
  min-height: 72px;
  background: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
}
.condition-title {
  background: #64a577;
  padding: 6px 11px;
  display: flex;
  justify-content: space-between;
  color: white;
}
.condition-body {
  padding: 6px 11px;
}
.condition-item {
  display: flex;
  line-height: 21px;
  display: flex;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 13px;
}
.condition-item-title {
  color: #333333;
  min-width: 52px;
}
.condition-item-text {
  color: #0075ff;
  margin-left: 10px;
}
</style>